<template>
  <div>
    <!--    面包屑-->
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>专题管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加专题</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div  class="add-item-box">



      <el-scrollbar style="height:100%">
        <div class="box_table">
          <h2>添加专题</h2>

          <el-form ref="form" :model="topicList" label-width="80px">
            <el-form-item label="专题名称">
              <el-input style="width: 200px" v-model="topicList.topicname"></el-input>
            </el-form-item>

            <el-form-item label="专题类型" v-model="topicList.topictype">
              <el-radio v-model="topicList.topictype" label="1">h5</el-radio>
              <el-radio v-model="topicList.topictype" label="2" @click="addInfoVisible = true">专题页面</el-radio>
              <div v-if="topicList.topictype==1">
                <el-row>
                  <el-col :span="3" v-for="(item,i) in topicList.imtopics">
                    <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                      <img :src="item.topiclname" class="image">
                      <div>
                        <p style="text-align: center">{{ item.topiclink }}</p>
                        <div class="bottom clearfix">
                          <center>
                            <el-button type="text" class="button" style="color: red;font-size: 12px"
                                       @click="delSceneChild(i)">删除</el-button>
                          </center>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="3">
                    <div>
                      <el-upload
                          class="avatar-uploader"
                          action="http://localhost:9527/topic/upload"
                          name="files"
                          :show-file-list="false"
                          ref="upload"
                          :on-success="handleAvatarSuccess"
                          :auto-upload="true">
                        <img v-if="sceneChild.topiclname" :src="sceneChild.topiclname" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon">点击上传场景图</i>
                      </el-upload>
                      <el-input style="width: 200px" v-model="sceneChild.topiclink"  placeholder="请输入链接"></el-input>
                      <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem">添加
                      </el-button>
                    </div>


                  </el-col>
                </el-row>
              </div>




              <div v-if="topicList.topictype==2">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div class="tanchu">
                      预览效果：
                      <div>
                        <img style="margin: 0 auto ; height: 150px ; width: 250px" :src="topicList.imtopic.topiclname" class="avatar">

                        <p style="text-align: center">{{topicList.imtopic.topiclink}}</p>

                      </div>
                      <div class="buju">
                        <div>
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <div class="tanchu" style="width: 120px; height: 75px;" >

                                <el-button class="anniu" @click="addBrandof" v-if="topicList.ItemList.length<1" >+添加商品</el-button>

                                <img  v-if="topicList.ItemList.length >= 1" :src="topicList.ItemList[0].itemThumbnail" class="tupian">
                                <p style="text-align: center" v-if="topicList.ItemList.length >= 1" >{{topicList.ItemList[0].itemName}}</p>

                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="tanchu" style="width: 120px; height: 75px;">
                                <el-button class="anniu" v-if="topicList.ItemList.length<2" >+添加商品</el-button>
                                <img  v-if="topicList.ItemList.length >=2" :src="topicList.ItemList[1].itemThumbnail" class="tupian">
                                <p style="text-align: center" v-if="topicList.ItemList.length >= 2" >{{topicList.ItemList[1].itemName}}</p>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <br>
                        <div class="buju1">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <div class="tanchu" style="width: 120px; height: 75px;">
                                <el-button class="anniu" v-if="topicList.ItemList.length<3" >+添加商品</el-button>
                                <img  v-if="topicList.ItemList.length >= 3" :src="topicList.ItemList[2].itemThumbnail" class="tupian">
                                <p style="text-align: center" v-if="topicList.ItemList.length >= 3" >{{topicList.ItemList[2].itemName}}</p>
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="tanchu" style="width: 120px ; height: 75px;">
                                <el-button class="anniu" v-if="topicList.ItemList.length<4">+添加商品</el-button>
                                <img  v-if="topicList.ItemList.length >= 4" :src="topicList.ItemList[3].itemThumbnail" class="tupian">
                                <p style="text-align: center" v-if="topicList.ItemList.length >= 4" >{{topicList.ItemList[3].itemName}}</p>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div  class="tanchu11">
                      <div class="ziti">
                        <h3 class="ziti1">添加专题</h3>
                      </div>
                      <h4>点击上传图片：</h4>
                      <el-upload
                          class="avatar-uploader"
                          action="http://localhost:9527/topic/upload"
                          name="files"
                          :show-file-list="false"
                          ref="upload"
                          :on-success="handleAvatarSuccess1"
                          :auto-upload="true">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon">点击上传图片</i>
                      </el-upload>
                      <br>
                      地址：<el-input style="width: 450px" v-model="topicList.imtopic.topiclink" placeholder="请输入焦点地址"></el-input>
                      <br>
                      <div class="brand" v-if="brandof == 1">

                        <el-table
                            :data="itemTableData"
                            height="250"
                            border
                            style="width:500px">
                          <el-table-column
                              prop="itemCode"
                              label="编号"
                              width="125">
                          </el-table-column>
                          <el-table-column
                              prop="itemName"
                              label="名称"
                              width="125">
                          </el-table-column>
                          <el-table-column
                              label="logo"
                              width="125">
                            <template v-slot="s">
                              <el-avatar shape="square" size="large" :src="s.row.itemThumbnail"></el-avatar>
                            </template>
                          </el-table-column>
                          <el-table-column
                              label="选择"
                              width="125sz">
                            <template v-slot="s">
                              <el-checkbox
                                  @change="addBrand(s.row)"
                              >
                                添加
                              </el-checkbox>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>


                  </el-col>
                </el-row>
              </div>




            </el-form-item>


            <el-form-item label="活动时间">
              <div class="block">

                <el-date-picker
                    v-model="topicList.starttime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择开始日期">
                </el-date-picker>

                <span>---</span>

                <el-date-picker
                    v-model="topicList.endtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择结束日期">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="专题分类">
              <el-select v-model="topicList.topicClassify" placeholder="请选择活动区域">
                <el-option label="国内" value="1"></el-option>
                <el-option label="自营" value="2"></el-option>
                <el-option label="国外" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否上架">
              <el-radio-group v-model="topicList.stat">
                <el-radio label="1" >是</el-radio>
                <el-radio label="2" >否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="panduanonSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>



        </div>
      </el-scrollbar>

    </div>

  </div>

</template>

<script>
export default {
  data(){
    return{
      value:false,
      itemTableData:[],
      brandof:'',
      // topicymList:{
      //   topicname:'',
      //   topictype:'',
      //   starttime:'',
      //   endtime:'',
      //   topicClassify:'',
      //   stat:'',
      //   ItemList:[],
      //   imtopic:{
      //     topiclink:"",
      //     imageUrlmb:'http://mms0.baidu.com/it/u=3326750462,2000114979&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=100&h=100&qq-pf-to=pcqq.c2c',
      //   }
      //
      // },

      imgList:{
        itemid:'',
        itemName:'',
        itemThumbnail:''
      },


      topicList:{
        topicname:'',
        topictype:'',
        starttime:'',
        endtime:'',
        topicClassify:'',
        stat:'',
        imtopics: [],
        ItemList:[],
        imtopic:{
          topiclink:"",
          topiclname:'http://mms0.baidu.com/it/u=3326750462,2000114979&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=100&h=100&qq-pf-to=pcqq.c2c',
        }
      },
      sceneChild: {
        topiclink: "",
        topiclname: "",
      },
      imageUrl: "",
      sceneChilds:{
        url:''
      },
      fileList: [],
      addInfoVisible:false,
      stale:1,

    }
  },
  created(){
  },
  methods: {
    addBrand(data){
      if (this.topicList.ItemList.length<4){
        this.imgList.itemid = data.id;
        this.imgList.itemName = data.itemName;
        this.imgList.itemThumbnail = data.itemThumbnail;
        this.topicList.ItemList.push(this.imgList)
        this.imgList = {
          itemid:'',
          itemName:'',
          itemThumbnail:''}
      }else {
        this.imgList = {
          id:'',
          itemName:'',
          itemThumbnail:''}
        alert("最多添加4个")
        return


      }

      console.log(this.ItemList)

    },
    findBrand() {
      this.$axios({
        url:"item/getAllItem",
        method:"get",
        params:{
          status:this.stale
        }
      }).then(res=>{
        this.itemTableData = res.data.data;
      })
    },


    addBrandof(){
      this.brandof = 1;
      this.findBrand();
    },
    panduanonSubmit(){
      if (this.topicList.topictype==1){
        this.onSubmit();
      }else if (this.topicList.topictype==2){
        this.onSubmitym()
      }
    },
    handleAvatarSuccess(res, file, fileList) {
      this.sceneChild.topiclname=res.data
      console.log("11111111111111111111111")
      console.log(res)
      console.log("11111111111111111111111")
    },
    handleAvatarSuccess1(res, file, fileList) {
      this.topicList.imtopic.topiclname=res.data
    },
    onSubmitym(){
      if (this.topicList.stat == 1){
        this.topicList.stat = true
      }if (this.topicList.stat == 2){
        this.topicList.stat = false
      }
      console.log(this.topicList)
      this.$axios({
        method:"post",
        url:"topic/addTopicChildYm",
        data:this.topicList
      }).then(res=>{
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.$router.push("/Topic")
        }
      })
    },
    onSubmit(){
      if (this.topicList.stat == 1){
        this.topicList.stat = true
      }if (this.topicList.stat == 2){
        this.topicList.stat = false
      }
      console.log(this.topicList)
      this.$axios({
        method:"post",
        url:"topic/addTopicChild",
        data:this.topicList
      }).then(res=>{
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.$router.push("/Topic")
        }
      })
    },
    addItem() {
      if (this.sceneChild.topiclname.length != 0) {
        this.sceneChilds.url = this.imageUrl
        this.imageUrl = ""
        if (this.topicList.imtopics.length < 5) {
          this.topicList.imtopics.push(this.sceneChild)
          console.log(this.topicList.imtopics)
          this.sceneChild = {topiclname: "", topiclink: ""}
        } else {
          this.sceneChild = {topiclname: "", topiclink: ""}
          alert("最多添加6个")
          return
        }
      } else {
        alert("请选择图片")
      }
    },


  }
}
</script>

<style scoped>
.tanchu{
  border:1px solid #000;
  width: 400px;
  height: 600px;

}
.add-item-box {
  width: 95%;
  height: 70vh;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 1px 4px 12px #000;
  overflow: hidden;
}

.buju{
  margin-top: 50px;
  margin-left: 60px;
}
.anniu{
  margin-top: 8px;
  margin-left: 10px;
  height: 60px ;
  width: 100px
}
.tanchu11{
  border:1px solid #000;
  width: 500px;
  height: 600px;
}
.brand{
  margin-top: 20px;
  margin-left: 20px;
}

.tupian{
  width: 120px;
  height: 75px;
}

.buju1{
  margin-top: 50px;
}
.ziti{
  width: 500px;
  height: 50px;
}
.ziti1{
  margin-top: 25px;
  margin-left: 200px;

}



</style>